<template>
  <div>
    <h1>App</h1>
    <div :style="{ display: 'flex', justifyContent: 'space-around' }">
      <!-- 
        如果想要给组件内部的插槽填充结构,则直接在组件标签的内部书写结构即可

       -->
      <Content :type="'logo'">
        <!-- 如果没有对插槽插入的结构做特殊的声明,则默认都是插入到默认插槽中,我们可以使用 v-slot:xxx 把某个结构插入到对应的插槽 -->
        <!-- v-slot指令只能使用在组件上或者template标签上 -->
        <template v-slot:default>
          <img src="http://www.atguigu.com/images/index_new/logo.png" alt="" />
        </template>
        <template v-slot:other>
          <img
            src="https://static.npmjs.com/attachments/ck3uweazy72ye8874y9kkxnx1-gak.png"
            alt=""
          />
        </template>
      </Content>
      <Content :type="'列表'">
        <!-- v-slot指令简写为 # -->
        <template #default>
          <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
          </ul>
        </template>
        <template #other>
          <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
          </ul>
        </template>
      </Content>
      <Content :type="'输入'">
        <template #default>
          <input type="text" /> <br />
          <input type="text" /> <br />
          <input type="text" /> <br />
        </template>
        <template #other>
          <input type="radio" /> <br />
          <input type="radio" /> <br />
          <input type="radio" /> <br />
        </template>
      </Content>
    </div>
  </div>
</template>

<script>
import Content from "@/components/Content";
export default {
  name: "App",
  components: {
    Content,
  },
};
</script>

<style></style>
